<template>
  <div class="orderCartContainer">
    <!-- //提示栏 -->
    <div class="prompts">
      <van-notice-bar
        left-icon="volume-o"
        text="因疫情影响,部分地区发货延迟通知"
      />
    </div>

    <!-- 地址栏 -->
    <div class="adress">
      <!-- 地址栏 -->
      <van-contact-card
        type="edit"
        :name="currentContact.name"
        :tel="currentContact.tel"
        @click="onEdit"
      />
    </div>

    <!-- 优惠券栏 -->
    <div class="discounts">
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>

      <!-- 礼品卡 -->
      <!-- /选择框 -->
      <div class="check">
        <div class="checkleft">
          <!-- 选择框 -->
          <van-radio-group v-model="radio">
            <van-radio name="1" icon-size="18px" shape="square" class="left">
              <van-cell title="礼品卡余额:¥:0.00" />
            </van-radio>
          </van-radio-group>
        </div>
        <!-- //文字提示 -->
        <div class="textleft">
          <!-- 余额文字提示 -->
        </div>
        <!-- 右标签 -->
        <div class="tasright">
          <!-- 右边标签 -->
          <van-cell is-link />
        </div>
      </div>

      <van-radio-group v-model="radio" class="check">
        <van-radio name="2" icon-size="18px" shape="square" class="left">
          <van-cell title="余额:¥:0.00" icon="shop-o">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          </van-cell>
        </van-radio>
        <div class="inforight">
          <van-icon name="info-o" size="15" />
        </div>
      </van-radio-group>
    </div>

    <!-- 商品合计栏 -->
    <div>
      <van-cell-group>
        <van-cell title="商品合计" value="¥:329:00" size="large" />
        <van-cell title="邮费" value="¥:0:00" size="large" />
        <van-cell title="活动优惠" value="-¥:154:00" size="large" />
        <van-cell title="优惠券" value="-¥:0:00" size="large" />
        <van-cell title="我要开发票" icon="enlarge">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>

      <template>
        <van-card
          num="2"
          origin-price="60.9"
          currency="¥"
          price="49.5"
          desc=""
          title="特价防晒必备 清爽夏日半透慵懒宽松T恤"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #tags>
            <van-tag color="#7232dd" plain>
              薰衣草紫; M（165/84A）<van-icon name="arrow-down" />
            </van-tag>
          </template>
        </van-card>
      </template>
    </div>
    <!-- 同意选择框 -->
    <div class="agreecheck">
      <van-checkbox
        v-model="radio"
        name="3"
        icon-size="18px"
        shape="square"
        class="agreeleft"
        >我已同意</van-checkbox
      >
      <a href="">《网易严选服务协议》</a>
    </div>
    <div style="height: 1.5rem"></div>
    <!-- 提交订单栏 -->
    <div class="orderstart">
      <van-submit-bar
        :price="3050"
        button-text="提交订单"
        text-align="left"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
//默认模拟数据
import { Toast } from 'vant'
//优惠券数据
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
}
export default {
  name: 'orderCart',
  currentContact: {},
  mounted() {
    this.$bus.$on('1', cartList)
    // console.log(cartList)
    
    this.$bus.$on('2', totalPrice)
  },
  data() {
    return {
      radio: '1',
      // 优惠券
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],

      //地址栏模拟数据
      currentContact: {
        name: '张三',
        tel: '13000000000',
      },

      //地址栏编辑
      editingContact: {},
    }
  },
  methods: {
    //提交跳转到person
    onSubmit() {
      this.$router.push('/payOrder')
    },
    // 购物车编辑
    onEdit() {
      Toast('编辑')
    },
    // 购物车选择
    onSelect(contact) {
      Toast('选择' + contact.id)
    },
    // 购物车新增
    onAdd() {
      Toast('新增')
    },
    //优惠券改变
    onChange(index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange(code) {
      this.coupons.push(coupon)
    },

    //地址栏编辑方法
    onSave(contactInfo) {
      Toast('保存')
    },
    onDelete(contactInfo) {
      Toast('删除')
    },
  },
}
</script>

<style lang="less" scoped>
.orderCartContainer {
  position: relative;

  // 地址栏
  .adress {
    border-bottom: 0.3rem solid #eee;
  }
  // 优惠券
  .discounts {
    // padding-top:1rem
    border-bottom: 0.3rem solid #eee;
  }

  //优惠券选择
  .check {
    display: flex;
    // height: 1.2rem;
    // margin: 0 1rem 0 1ream;
    // background-color: violet;
    padding-left: 0.5rem;
    font-size: 1rem;
    .checkleft {
      float: left;
      // margin-left: 0.5rem;
      text-align: center;
      line-height: 1rem;
    }
    .textleft {
      text-align: center;
      width: 2.5rem;
      line-height: 1rem;
    }
    .tasright {
      float: right;
      margin-left: 1rem;
    }
    .left {
      float: left;
    }
    .inforight {
      float: right;
      text-align: 1rem;
      line-height: 1rem;
      padding-left: 4.5rem;
    }
  }
  // 同意选择
  .agreecheck {
    display: block;
    // margin-top:
    display: flex;
    font-size: 0.3rem;
    padding: 0 0.5rem 0 0.5rem;
    background-color: rgba(238, 238, 238, 0.815);
    line-height: 1rem;
    text-align: center;
    height: 1rem;

    position: absolute;
    bottom: 0;
    width: 90%;
    .agreeleft {
      color: rgb(223, 211, 211);
    }
  }
}
</style>
